import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../utils/tools.dart';
import '../models/article_model.dart';

class ArticleWidget extends StatelessWidget {
  final ArticleModel item;
  final String? heroTag;
  final double imageWidth;
  final double elevation;

  final int cols;

  const ArticleWidget(
    this.item, {
    Key? key,
    this.imageWidth = 124,
    this.cols = 3,
    this.heroTag,
    this.elevation = 0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var textTheme = Theme.of(context).textTheme;
    return Card(
      elevation: elevation,
      child: InkWell(
        onTap: () {
          Navigator.pushNamed(
            context,
            '/channel/detail',
            arguments: {"id": item.id, "data": item},
          );
        },
        borderRadius: const BorderRadius.all(Radius.circular(4)),
        child: SizedBox(
          height: imageWidth,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              if (item.cover.isNotEmpty)
                ClipRRect(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(5),
                    bottomLeft: Radius.circular(5),
                  ),
                  child: SizedBox(
                    width: imageWidth,
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: Hero(
                        tag: heroTag ?? "article_${item.id}",
                        child: Tools.image(
                          item.cover,
                          width: imageWidth,
                          height: imageWidth,
                        ),
                      ),
                    ),
                  ),
                ),
              const SizedBox(width: 10),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Text(
                        item.title,
                        overflow: TextOverflow.ellipsis,
                        style: textTheme.titleMedium,
                        maxLines: 2,
                      ),
                    ),
                    Expanded(
                      child: Text(
                        item.description,
                        style: textTheme.bodySmall,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                      ),
                    ),
                    Row(
                      children: [
                        Icon(
                          CupertinoIcons.time,
                          size: textTheme.titleSmall!.fontSize,
                        ),
                        Text(
                          Tools.formatDateFromTimestamp(
                            item.createTime,
                            format: 'yyyy-MM-dd',
                          ),
                          style: textTheme.bodySmall,
                        ),
                        const SizedBox(width: 10),
                        Icon(
                          CupertinoIcons.paperplane,
                          size: textTheme.titleSmall!.fontSize,
                        ),
                        Text(
                          '${item.views} 次浏览',
                          style: textTheme.bodySmall,
                        ),
                      ],
                    ),
                    const SizedBox(height: 10),
                  ],
                ),
              ),
              const SizedBox(width: 10),
            ],
          ),
        ),
      ),
    );
  }
}
